<template>
  <div class="reports hd bg-white">
       <div class="yygh_search">
          <ul class="fl">
            <li>
              <router-link to="/report" class="hover">检验报告</router-link>
            </li>
            <!-- <li>
              <router-link to="/report?sort=2" class="">检查报告</router-link>
            </li> -->
          </ul>
        </div>

        <position>
					<router-link to="/report">报告查询</router-link>
					&gt;<router-link to="/report">检查报告</router-link>
					&gt;
					<span class="last">{{report.labName}}</span>
				</position>
        <div class="report-detail">
          <div class="title">江苏省中医院检验报告单</div>
          <div class="report-detail-header">
            <ul class="report-ul">
              <li><span class="t3">姓名</span> <span class="bigsize">{{person.personName}}</span></li>
              <li><span class="t3">性别</span> <span class="bigsize">{{SEX[person.sex]}}</span></li>
              <li><span class="t3">年龄</span> <span class="bigsize">{{new Date().getFullYear() - person.dob.substr(0,4)}}</span></li>
              <li>{{report.labName}}</li>
              <li><span class="t3">门诊号</span> <span class="bigsize">{{report.dept.localCode}}</span></li>
              <li><span class="t3">科室</span> <span class="bigsize">{{report.dept.localText}}</span></li>
              <li></li>
              <li><span class="t3">临床诊断</span> <span class="bigsize">{{report.comment}}</span></li>
            </ul>
            <ul class="report-ul detail-header center">
              <li>检验项目</li>
               <li>结果</li>
               <li>参考范围</li>
               <li>单位</li>
               <li>检验项目</li>
               <li>结果</li>
               <li>参考范围</li>
               <li>单位</li>
            </ul>
            <ul class="report-ul detail-list center">
              <li v-for ="(d, i) in report.details" :key="i" >
                <span>{{d.lab.localText}}</span>

                <span class="t4"  v-if ="d.resultPrompt !== ' '">
                  {{d.result}} {{d.resultPrompt}}
                </span>
                <span v-else>{{d.result}}</span>
                <span>{{d.referLower}} - {{d.referUpper}}</span>
                <span>{{d.resultUnit}}</span>
              </li>
            </ul>
            <div class="report-status">
              <span class="t3">标本状态：</span> {{report.comment}}
            </div>
            <ul class="report-ul detail-footer">
              <li><span class="t3">送检医生：</span> {{report.rpDoctor.localText}}</li>
              <li><span class="t3">检验者：</span> {{report.doctor.localText}}</li>
              <li><span class="t3">审核者：</span> </li>
              <li><span class="t3">采集时间：</span> {{report.createDt}}</li>
              <li><span class="t3">签收时间：</span> {{report.reportDt}}</li>
              <li><span class="t3">报告时间：</span> {{report.reportDt}}</li>
            </ul>

          </div>
        </div>


  </div>
</template>

<script>
import Position from '../../components/Position'
import {commonAjax, PLATFORM_PREFIX, SEX} from '../../api/api'

export default {
  data () {
    return {
      report: {dept: {}, doctor: {}, rpDoctor: {}},
      person: JSON.parse(localStorage.person || '{}'),
      SEX: SEX
    }
  },
  mounted () {
    // let sort = this.$route.query.sort || '1'
    this.getReportById()
  },
  methods: {
    getReportById () {
      let odsId = localStorage.__reportId
      this.$store.commit('UPDATE_LOADING')
      commonAjax([odsId], `${PLATFORM_PREFIX}.reportService`, 'getLabReport').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          this.report = res.data.body || []
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
        this.$message({
          message: '请求服务器失败',
          type: 'error'
        })
      })
    }
  },
  components: {
    Position
  }
}
</script>

<style lang="less">
@import '../../common/css/vars.less';
.report-detail {
  padding:0 20px 20px;
  background: #FFFBF8;
  margin:0  20px 20px;
  border: 1px solid #F8E6E2;
  .title {
    text-align: center;
    font-size: 1.6em;
    padding: 20px;
  }
  .report-status {
      line-height: 40px;
      background: #FFF4EB;
      padding: 0 10px;
       border-top:1px solid #F8E6E2;
        border-bottom:1px solid #F8E6E2;
    }
  .report-ul {
    overflow: hidden;
    li {
      float: left;
      width: 25%;
      height: 36px;
      line-height: 36px;
      padding: 0 10px;
      text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
      .bigsize {font-size: 1.2em;}
    }
    &.detail-header {
      background: #FFF4EB;
      li {
        width: 12.5%;
        border-top:1px solid #F8E6E2;
        border-bottom:1px solid #F8E6E2;
      }
    }
    &.detail-footer {
      li {width: 33%;}
    }

    &.detail-list {
      background: #fff;
      li {
        width: 50%;
        .iconfont {
          font-size: .5em;
        }
        >span {
          display: inline-block;
          width: 25%;
        }
        &:nth-child(2n) {
          border-left:1px solid #F8E6E2;
        }
        &:hover {
           background: #FFFBF8;
        }
      }
    }

  }
}
</style>
